import React from "react";
import DemoComponent from "../../../src";

import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Badge from "@mui/material/Badge";
import MailIcon from "@mui/icons-material/Mail";
import Checkbox from "@mui/material/Checkbox";

/**
 * 已用开发中组件，调试或展示
 */

const label = { inputProps: { "aria-label": "Checkbox demo" } };

const extra1 = (
  <Stack spacing={2} direction="row">
    <Button size="small" variant="text">
      Text
    </Button>
    <Button size="small" variant="contained">
      Contained
    </Button>
    <Button size="small" variant="outlined">
      Outlined
    </Button>
  </Stack>
);

const extra2 = (
  <Stack spacing={2} direction="row">
    <div>
      <Checkbox {...label} defaultChecked />
      <Checkbox {...label} />
      <Checkbox {...label} disabled />
      <Checkbox {...label} disabled checked />
    </div>
    <Badge badgeContent={4} color="primary">
      <MailIcon color="action" />
    </Badge>
    <TextField size="small" required id="outlined-required" label="Required" defaultValue="Hello World" />
  </Stack>
);

const DEMO = function () {
  const props = {
    title: "title",
    subTitle: "here is subTitle"
  };

  return (
    <>
      <Box sx={{ p: 2 }}>
        <DemoComponent {...props} extra={extra1} />
      </Box>
      <Box sx={{ p: 2 }}>
        <DemoComponent {...props} extra={extra2} />
      </Box>
    </>
  );
};

export default DEMO;
